<template>
    <div>
        <t-navbar title="管理任务" :fixed="false" class="custom-navbar">
            <template #right>
            </template>
        </t-navbar>
        <div>
            <t-tabs default-value="first">
                <t-tab-panel value="first" :badge-props="{ dot: true, offset: [-4, 1] }" label="待分发" />
                <t-tab-panel value="second" :badge-props="{ count: 8, offset: [-8, 3] }" label="已分发" />
            </t-tabs>
            <t-radio-group :value="radio" @change="onChange">
                <view v-for="(item, index) in options" :key="index"
                    :class="`card ${radio == index ? 'card--active' : ''}`">
                    <icon v-if="radio == index" name="check" class="card__icon" />
                    <t-radio :value="index" :label="item.title" :content="item.desc" icon="none" borderless />
                </view>
            </t-radio-group>
            <p class="px-3 mt-3">
            <h3>分发任务</h3>
            </p>
            <t-collapse>
                <t-collapse-panel value="0" header="选择单位">
                    <t-radio-group :default-value="radio" class="radio-group-demo" @change="groupChangeFn">
                        <t-radio name="radio" value="1" label="通川" />
                        <t-radio name="radio" value="2" label="达川" />
                        <t-radio name="radio" value="3" label="开江" />
                        <t-radio name="radio" value="4" label="万源" />
                        <t-radio name="radio" value="5" label="渠县" />
                        <t-radio name="radio" value="6" label="宣汉" />
                        <t-radio name="radio" value="7" label="大竹" />
                    </t-radio-group>
                </t-collapse-panel>
            </t-collapse>
            <div class="mt-3">
                <div class="row">
                    <t-button size="large" theme="primary" block>立即分发</t-button>
                </div>
                <div class="row">
                    <t-button size="large" theme="light" block>取消分发</t-button>
                </div>
            </div>
        </div>
        <div>

        </div>
        <div style="height:120px;"></div>
    </div>


</template>

<script setup lang='ts'>
import { Icon } from 'tdesign-icons-vue-next';
const radio = ref('3');
const options = [{
    id: 1,
    title: "SS外呼单",
    desc: '一段描述文字'
}, {
    id: 2,
    title: "BB外呼单",
    desc: '一段描述文字'
}, {
    id: 3,
    title: "XX外呼单",
    desc: '一段描述文字'
}]
const onChange = (value: any, context: { e: Event }) => {
    radio.value = value;
};

const groupChangeFn = (value: any, context: { e: Event }) => {
    console.log(value, context);
};
</script>

<style lang="scss">
.t-tabs {
    margin-bottom: 16px;
}

.custom-navbar {
    --td-navbar-bg-color: #0052d9;
    --td-navbar-color: #fff;
}

.card {
    display: block;
    position: relative;
    margin: 16px;
    border-radius: 6px;
    overflow: hidden;
    box-sizing: border-box;
    border: 1.5px solid #fff;
}

.card--active {
    border-color: #0052d9;
}

.card--active::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border: 14px solid #0052d9;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.card__icon {
    display: block;
    color: #fff;
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
}

/* 横向布局 */
.horizontal-box {
    width: calc(100% - 32px);
    display: flex;
    align-items: center;
    margin: 16px;
}

.horizontal-box .card {
    flex: 1;
    margin: 0;
}

.horizontal-box .card+.card {
    margin-left: 12px;
}
.row {
    padding: 0 16px;
    margin: 16px 0;
}
</style>